<template>
    <el-select 
      v-model="currentAccountId" 
      placeholder="选择账号"
      @change="handleAccountChange"
    >
      <el-option
        v-for="account in accounts"
        :key="account.accountId"
        :label="account.accountName"
        :value="account.accountId"
      >
        <span>{{ account.accountName }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">
          {{ account.agentId }}
        </span>
      </el-option>
    </el-select>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  import { useMessageStore } from '@/stores/MessageStore';
  
  const store = useMessageStore();
  const accounts = computed(() => store.accounts);
  const currentAccountId = computed({
    get: () => store.currentAccount?.accountId,
    set: (value) => store.setCurrentAccount(value)
  });
  
  // 初始化加载账号
  store.loadAccounts();
  </script>